<template>
    <a-modal
            :title="tableTitle"
            :visible="visible"
            width="1200px"
            @ok="handleOk"
            :maskClosable="false"
            :confirmLoading="confirmLoading"
            @cancel="handleCancel"
    >
        <a-form-model ref="form" :model="model">
            <a-card title="审核区">
                <a-descriptions bordered :column="2">
                    <a-descriptions-item label="审核" :span="2">
                        <a-form-model-item
                                :prop="options.statusName"
                                :rules="{
                                        required: true,
                                        message: '选择审核',
                                        trigger: 'change',
                                    }">
                            <a-radio-group v-model="model[options.statusName]">
                                <a-radio :value="item.dataValue" :key="index" v-for="(item,index) in options.statusData">
                                    {{item.dataName}}
                                </a-radio>
                            </a-radio-group>
                        </a-form-model-item>
                    </a-descriptions-item>
                    <a-descriptions-item label="审核意见" :span="2">
                        <a-form-model-item
                                :prop="options.remarkName"
                                :rules="{
                                        required: model[options.statusName] == options.remarkShow,
                                        message: '请输入审核意见',
                                        trigger: 'change',
                                    }">
                            <a-textarea
                                    :maxLength="100"
                                    placeholder="请输入审核意见"
                                    v-model="model[options.remarkName]">
                            </a-textarea>
                        </a-form-model-item>
                    </a-descriptions-item>
                </a-descriptions>
            </a-card>
            <a-descriptions bordered :column="2">
                <a-descriptions-item v-for="(item,index) in formData" :key="index" :label="item.title"
                                     :span="item.span">
                        <span v-if="item.type == 'select'">
                            {{typeof item.typeData == 'string'?getSelectData($store.getters.dictionary[item.typeData],model[item.dataIndex]):getSelectData(item.typeData,model[item.dataIndex])}}
                        </span>
                    <span v-else-if="item.type == 'select.multiple'">
                            {{typeof item.typeData == 'string'?getMultipleSelectData($store.getters.dictionary[item.typeData],model[item.dataIndex]):getMultipleSelectData(item.typeData,model[item.dataIndex])}}
                        </span>
                    <span v-else-if="item.type == 'cascader'">
                            {{getCasCaderData(item.typeData,model[item.dataIndex])}}
                        </span>
                    <span v-else-if="item.type == 'radio'">
                            {{typeof item.typeData == 'string'?getSelectData($store.getters.dictionary[item.typeData],model[item.dataIndex]):getSelectData(item.typeData,model[item.dataIndex])}}
                        </span>
                    <span v-else-if="item.type == 'date'">
                            {{getData(model[item.dataIndex],item)}}
                        </span>
                    <span v-else-if="item.type == 'switch'">
                            {{model[item.dataIndex]?model[item.dataIndex]=='是'?'是':'否':'否'}}
                        </span>
                    <span v-else-if="item.type == 'editor'">
                            <div v-html="model[item.dataIndex]">

                            </div>
                        </span>
                    <span v-else-if="item.type == 'dateRange'">
                            {{getRangeData(model[item.typeData.startDate],item)+ '~' + getRangeData(model[item.typeData.endDate],item)}}
                        </span>
                    <span v-else-if="item.type == 'upload'">
                            <xlImages v-model="model[item.dataIndex]" :max="0"></xlImages>
                        </span>
                    <span v-else-if="item.type == 'upload.file'">
                            <xluploadFile v-model="model[item.dataIndex]" :del-visible="false"></xluploadFile>
                        </span>
                    <span v-else-if="item.type == 'input.money'">
                                {{moneyFormat(model[item.dataIndex])}}
                        </span>
                    <xlNameFile
                            v-else-if="item.type=='upload.name'"
                            :disabled="item.disabled"
                            v-model="model[item.dataIndex]"
                            :file-path="item.typeData.filePath"
                            :file-name="item.typeData.fileName"
                            :del-visible="false"
                    >
                    </xlNameFile>
                    <span v-else>
                            {{ model[item.dataIndex]?model[item.dataIndex].toString():'--'}}
                        </span>
                </a-descriptions-item>
            </a-descriptions>
        </a-form-model>
    </a-modal>
</template>

<script>
    import moment from "moment"
    import xluploadFile from '../formUntil/xluploadFile'
    import xlImages from '../formUntil/xlImages'
    import xlNameFile from '../formUntil/xlNameFile'

    export default {
        name: "xlSeeFrom",
        data() {
            return {
                visible: false,
                type: 1,
                formData: [],
                model: {},
                confirmLoading: false,
                tableTitle: '审核'
            }
        },
        props: {
            width: String,
            options: {
                type: Object,
                default: {
                    statusName: 'status',
                    remarkName: 'remark',
                    remarkShow:'0',
                    statusData: [
                        {
                            dataName: '选择框1',
                            dataValue: '选择框1'
                        },
                        {
                            dataName: '选择框2',
                            dataValue: '选择框2'
                        }
                    ]
                }
            }
        },
        components: {
            xluploadFile,
            xlImages,
            xlNameFile
        },
        created() {

        },
        methods: {
            handleOk() {
                this.$refs.form.validate(async (valid, value) => {
                    console.log(valid, value)
                    if (valid) {
                        this.confirmLoading = true
                        this.$emit('handleOk',this.model)
                        console.log(this.model)

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            formatData(columns, formData) {
                console.log(formData, 78)
                this.formData = []
                this.model = formData
                columns.map((item, index) => {
                    if (item.key != "rowIndex" && item.dataIndex != "action" && item.type) {
                        this.formData.push(item)
                    } else {
                        if (item.children) {
                            this.formatChild(item.children)
                        }
                    }
                })
            },
            formatChild(children) {
                children.map((item, index) => {
                    if (item.key != "rowIndex" && item.dataIndex != "action" && item.type) {
                        this.formData.push(item)
                    } else {
                        if (item.children) {
                            this.formatChild(item.children)
                        }
                    }
                })
            },
            handleCancel() {
                //关闭窗口
                this.visible = false
            },
            getSelectData(data, text) {
                if (data) {
                    const target = data.filter(item => text == item.codeMasterValue)[0]?.codeMasterName || data.filter(item => text == item.dataValue)[0]?.dataName || '--'
                    return target
                } else {
                    return text
                }
            },
            getMultipleSelectData(data, text) {
                if (data) {
                    let target = []
                    text.forEach(item => {
                        target.push(data.filter(i => item == i.codeMasterValue)[0]?.codeMasterName || data.filter(i => item == i.dataValue)[0]?.dataName || '--')
                    })
                    return target.join(',')
                } else {
                    return text
                }
            },
            getCasCaderData(data, text) {
                let arr = data.reduce((op, {value, label, children}) => op.concat([{value, label}], children), [])
                if (data) {
                    let target = []
                    JSON.parse(text).forEach(item => {
                        target.push(
                            arr.filter(a => a.value == item)[0].label
                        )
                    })
                    return target.join('/')
                } else {
                    return text
                }
            },
            getData(date, item) {
                if (date) {
                    if (!item?.typeData) {
                        return moment(date).format('YYYY-MM-DD')
                    }
                    if (item.typeData.type == 'date') {
                        return moment(date).format('YYYY-MM-DD')
                    }
                    if (item.typeData == 'dateTime') {
                        return moment(date).format('YYYY-MM-DD HH:mm:ss')
                    }
                    if (item.typeData == 'month') {
                        return moment(date).format('YYYY-MM')
                    }
                    if (item.typeData == 'year') {
                        return moment(date).format('YYYY')
                    }

                } else {
                    return '--'
                }
            },
            getRangeData(date, item) {
                if (date) {
                    if (item.typeData.type == 'date') {
                        return moment(date).format('YYYY-MM-DD')
                    }
                    if (item.typeData.type == 'dateTime') {
                        return moment(date).format('YYYY-MM-DD HH:mm:ss')
                    }
                    if (item.typeData.type == 'month') {
                        return moment(date).format('YYYY-MM')
                    }
                    if (item.typeData.type == 'year') {
                        return moment(date).format('YYYY')
                    }

                } else {
                    return '--'
                }
            },
            moneyFormat(num) {
                var reg = /\d{1,3}(?=(\d{3})+$)/g;
                return (num + '').replace(reg, '$&,');
            }
        }
    }
</script>

<style scoped lang="less">
    /deep/ .ant-form-item {
        margin: 0;
    }

    /deep/ .ant-input-number {
        width: 100%;
    }
    .ant-card{
        margin-bottom: 10px;
    }
    .xl-dateRange {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
</style>
